﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Base.cshtml";
}
@section head{
    <script src="/content/scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
}
<div class="row-fluid">
    <div class="span12">
        <table border="0" width="100%">
            <tr>
                <td width="8%" align="center">
                    关键字：
                </td>
                <td>
                    <input id="txtKey" name="txtKey" type="text" class="input-medium search-query" placeholder="用户名/姓名"
                        style="width: 250px; background-color: #fff;" />
                    <button class="btn btn-primary btn-small" id="btnSearch">
                        查询
                    </button>
                </td>
                <td align="right">
                    <button id="btnAdd" class="btn btn-primary btn-small" style="margin-right: 20px">
                        新增用户
                    </button>
                </td>
            </tr>
        </table>
    </div>
</div>
 <div style="width:99%;height:1px;overflow:hidden;background-color:#dddddd;margin:10px"></div>
<table id="usergrid" class="mmg">
    <tr>
        <th rowspan="" colspan="">
        </th>
    </tr>
</table>
<div id="pg" style="text-align: right;">
</div>
<div id="userform" class="modal fade" data-backdrop="static" tabindex="-1" style="display: none;
    width: 400px">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 class="modal-title" style="font-size: 17px; font-weight: bold" id="modaltitle">
            新增用户</h3>
    </div>
    <div class="modal-body">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="middle" width="100px" align="right">
                    用户名:
                </td>
                <td>
                    <input type="text" id="txtUserName" placeholder="用户名" class="col-xs-10 col-sm-5" /><span
                        style="color: Red">*</span>
                </td>
            </tr>
            <tr>
                <td valign="middle" align="right">
                    用户姓名:
                </td>
                <td>
                    <input type="text" id="txtRealName" placeholder="用户姓名" class="col-xs-10 col-sm-5" /><span
                        style="color: Red">*</span>
                </td>
            </tr>
            <tr>
                <td valign="middle" align="right">
                    移动电话:
                </td>
                <td>
                    <input type="text" id="txtMobile" placeholder="移动电话" class="col-xs-10 col-sm-5" /><span
                        style="color: Red">*</span>
                </td>
            </tr>
            <tr>
                <td valign="middle" align="right">
                    办公电话:
                </td>
                <td>
                    <input type="text" id="txtOfficePhone" placeholder="办公电话" class="col-xs-10 col-sm-5" />
                </td>
            </tr>
            <tr>
                <td valign="middle" align="right">
                    &nbsp;
                </td>
                <td>
                    <span id="lblmsg" style="color: Red">&nbsp;</span>
                    <input type="hidden" name="isEdit" id="isEdit" value="0" />
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <button id="btnSave" type="button" class="btn btn-primary">
            保存</button>
        <button type="button" data-dismiss="modal" class="btn btn-default">
            取消</button>
    </div>
</div>
@section tail{
    <script src="/content/plugins/mmgrid/mmGrid.js" type="text/javascript"></script>
    <script src="/content/plugins/mmgrid/mmPaginator.js" type="text/javascript"></script>
    @*<script src="/content/plugins/bootbox.min.js"></script>*@
    <script type="text/javascript">
        var userdiv = $("#userform");
        var cols = [

        { title: '用户名', name: 'UserName', width: 80, align: 'center' },
        { title: '用户姓名', name: 'RealName', width: 50, align: 'center' },
        { title: '办公电话', name: 'TelePhone', width: 50, align: 'center' },
        { title: '移动电话', name: 'HandPhone', width: 50, align: 'center' },
        { title: '状态', name: 'Status', width: 30, align: 'center', renderer: function (val, item, index) {

            if (val == 0) return '禁用';
            return '正常';
        }
        },
        { title: '操作', name: 'UserName', width: 250, align: 'center', lockWidth: true, lockDisplay: true, renderer: function (val, item, index) {
            var html = "";
            if (item['Status'] == 99) {
                html = '<button class="btn btn-info btn-mini" onclick="grid_user_edit(\'' + item["UserName"] + '\',\'' + item["RealName"] + '\',\'' + item["HandPhone"] + '\',\'' + item["TelePhone"] + '\')">编辑</button>';

                html += ' <button  class="btn  btn-mini" disabled="true" >禁用</button>';

                html += ' <button  class="btn  btn-mini" disabled="true">授权</button>'
                html += ' <button  class="btn  btn-mini" disabled="true">删除</button>';
            }
            else {
                html = '<button class="btn btn-info btn-mini" onclick="grid_user_edit(\'' + item["UserName"] + '\',\'' + item["RealName"] + '\',\'' + item["HandPhone"] + '\',\'' + item["TelePhone"] + '\')">编辑</button>';
                if (item['Status'] == 1) {
                    html += ' <button  class="btn btn-info btn-mini" onclick="grid_user_changestate(\'' + item["UserName"] + '\',0)">禁用</button>';
                }
                else {
                    html += ' <button  class="btn btn-info btn-mini" onclick="grid_user_changestate(\'' + item["UserName"] + '\',1)">启用</button>';
                }
                html += ' <button  class="btn btn-info btn-mini">授权</button>'
                html += ' <button  class="btn btn-danger btn-mini"  onclick="grid_user_changestate(\'' + item["UserName"] + '\',-1)">删除</button>';
            }
            return html;
        }
        }
    ];

        var mmg;
        $(function () {
            // $("#txtKey").val("abc");
            $("#btnAdd").click(function () {
                resetUser();
                // var userdiv = $("#userform");
                var modaltitle = $("#modaltitle");
                modaltitle.text("新增用户");

                userdiv.modal();
            });
            $("#btnSave").click(function () {
                //save();
                //bootbox.alert("<h3>保存成功</h3>");
                $("#btnSave").text("保存中..");
                $("#btnSave").attr("disabled", true);
                save();

            });
            mmg = $('#usergrid').mmGrid({
                indexCol: true,
                indexColWidth: 25,
                height: $("body", parent.document).height() - 247,
                cols: cols,
                url: '/User/GetUserListByPage',
                method: 'get',
                remoteSort: true,
                //items: items,
                //sortName: 'SECUCODE',
                //sortStatus: 'asc',
                multiSelect: false,
                checkCol: false,
                fullWidthRows: true,
                autoLoad: false,
                plugins: [
                        $('#pg').mmPaginator()
                    ]
            });
            mmg.load();
            $("#btnSearch").click(function () {
                //mmg.setParm({ key: $("#txtKey").val(), key1: $("#txtKey").val() });
                //                mmg.setParm({ key: $("#txtKey").val() });
                //                mmg.load({ page: 1 });
                search();

            });
        });

        function search() {
            mmg.setParm({ key: $("#txtKey").val() });
            mmg.load({ page: 1 });
        }

        function save() {
            var mobilereg = /^1[3|5|8|7]\d{9}$/;
            if ($('#txtUserName').val() == "") {
                $('#txtUserName').focus();
                $("#lblmsg").html('用户名不能为空');
                $("#btnSave").text("保存");
                $("#btnSave").attr("disabled", false);
                return;
            }
            if ($('#txtRealName').val() == "") {
                $('#txtRealName').focus();
                $("#lblmsg").html('真实姓名不能为空');
                $("#btnSave").text("保存");
                $("#btnSave").attr("disabled", false);
                return;
            }
            if ($('#txtMobile').val() == "") {
                $('#txtMobile').focus();
                $("#lblmsg").html('手机不能为空');
                $("#btnSave").text("保存");
                $("#btnSave").attr("disabled", false);
                return;
            }
            if (!mobilereg.test($('#txtMobile').val())) {
                $('#txtMobile').focus();
                $("#lblmsg").html('手机号码格式错误');
                $("#btnSave").text("保存");
                $("#btnSave").attr("disabled", false);
                return;
            }
            $.ajax({
                url: "/User/UserSave",
                data: "userName=" + $('#txtUserName').val() + "&realName=" + $("#txtRealName").val()
                    + "&telePhone=" + $("#txtOfficePhone").val() + "&handPhone=" + $("#txtMobile").val()
                    + "&optype=" + $("#isEdit").val(),
                type: "post",
                success: function (result) {
                    //写提交ajax操作
                    if (result == "1") {
                        userdiv.modal("hide");
                        bootbox.alert("<span style='font-size:14px;'><i style='color:green;' class=' icon-ok-sign bigger-290'></i>&nbsp;&nbsp;用户保存成功</span>", '300px', function () {

                            search();
                        });
                        resetUser();
                    }
                    else {
                        if (result == "-1") {
                            bootbox.alert("<span style='font-size:14px;'><i style='color:green;' class='icon-warning-sign bigger-290'></i>&nbsp;&nbsp;用户名已存在</span>", '300px');

                        }
                        else {
                            bootbox.alert("<span style='font-size:14px;'><i style='color:green;' class='icon-remove-sign bigger-290'></i>&nbsp;&nbsp;用户名已存在</span>", '300px');
                        }
                    }
                    $("#btnSave").text("保存");
                    $("#btnSave").attr("disabled", false);
                }
            });
            //userdiv.modal("hide");
        }

        function grid_user_edit(userName, realName, handPhone, telPhone) {

            setUser(userName, realName, handPhone, telPhone);
            $("#txtUserName").attr("readonly", "readonly");
            //var userdiv = $("#userform");
            var modaltitle = $("#modaltitle");
            modaltitle.text("编辑用户");
            userdiv.modal();
        }

        function grid_user_changestate(userName, state) {

            var statestr = "禁用";
            if (state == 1) {
                statestr = "启用";
            }
            else if (state == -1) {
                statestr = "删除";
            }
            bootbox.confirm("<span style='font-size:14px;'><i style='color:green;' class='icon-question-sign bigger-290'></i> &nbsp;&nbsp;确定要" + statestr + "该用户吗？</span>", '300px', function (confirmed) {
                if (confirmed == true) {
                    $.ajax({
                        url: "/User/UserChangeStatus",
                        data: "userName=" + userName + "&status=" + state,
                        type: "post",
                        cache: false,
                        success: function (result) {

                            if (result == "1") {
                                bootbox.alert("<span style='font-size:14px;'><i style='color:green;' class='icon-ok-sign bigger-290'></i>&nbsp;&nbsp;" + statestr + "用户成功</span>", '300px');
                                mmg.load();
                            } else {
                                bootbox.alert("<span style='font-size:14px;'><i style='color:green;' class='icon-remove-sign bigger-290'></i>&nbsp;&nbsp;" + statestr + "用户失败</span>", '300px');

                            }
                        }
                    });
                }
            });

        }

        function resetUser() {
            $("#txtUserName").removeAttr("readonly");
            $("#txtUserName").val("");
            $("#txtRealName").val("");
            $("#txtMobile").val("");
            $("#txtOfficePhone").val("");
            $("#isEdit").val("0");
            $("#lblmsg").html("");
        }

        function setUser(userName, realName, handPhone, telPhone) {
            $("#txtUserName").val(userName);
            $("#txtRealName").val(realName);
            $("#txtMobile").val(handPhone);
            $("#txtOfficePhone").val(telPhone);
            $("#isEdit").val("1");
            $("#lblmsg").html("");
        }
        
    </script>
}
